<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Toolbar - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

  <style>
    #main ion-title {
      transition: opacity ease-in-out 200ms;
    }
    .hide-title ion-title {
      opacity: 0;
    }
  .my-class {
    top: 0;
    position: sticky;
    z-index: 10;
  }
  .my-class ion-title {
    text-align: left;
    padding-left: 16px;
    padding-right: 0;
    font-size: 35px;
  }
  .two-class {
    z-index: -1;
  }
  </style>
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary" id="main" style="--border-width: 0;">
          <ion-title>Title</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">
      <ion-header>
        <ion-toolbar color="primary" id="big-toolbar" class="my-class">
          <ion-title>Title</ion-title>
        </ion-toolbar>
        <ion-toolbar color="primary" class="two-class">
          <ion-searchbar></ion-searchbar>
        </ion-toolbar>
      </ion-header>

      <ion-card color="secondary">
        <ion-card-header>
          Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-card color="primary" class="rainbow-content">
        <ion-card-header>
          Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-card color="primary">
        <ion-card-header>
          Card Header
        </ion-card-header>
        <ion-card-content>
          <ion-card-title>
            Title
          </ion-card-title>
          Some normal text in content.
          <h3>h3 in content</h3>
          <p>
            Paragraph in content.
          </p>
          <p>
            Another paragraph in content.
          </p>
        </ion-card-content>
      </ion-card>

      <ion-list id="dynamicList">
      </ion-list>

    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-buttons slot="primary">
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-searchbar>
        </ion-searchbar>
      </ion-toolbar>

      <ion-toolbar>
        <ion-title>
          Footer
        </ion-title>
      </ion-toolbar>
    </ion-footer>
  </ion-app>

  <style>
    .rainbow-content {
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }

  </style>

  <script>
    const i = new IntersectionObserver((e) => {
      if (e[0].isIntersecting) {
        document.querySelector('#main').classList.add('hide-title')
      } else {
        document.querySelector('#main').classList.remove('hide-title')
      }
    }, {
      threshold: 0.5
    });
    i.observe(document.querySelector('#big-toolbar'));
  </script>
</body>

</html>
